<template>
  <div>
    <basic-container>
        <avue-data-progress :option="option4"></avue-data-progress>
        <avue-data-box :option="option1"></avue-data-box>
        <avue-data-tabs :option="option3"></avue-data-tabs>
        <LineChart></LineChart>
        <el-row :gutter="20">
            <el-col :span="12"><avue-crud :row-class-name="tableRowClassName" :data="data" :option="option5" v-model="obj" ></avue-crud></el-col>
            <el-col :span="12"><avue-crud :row-class-name="tableRowClassName" :data="data" :option="option5" v-model="obj" ></avue-crud></el-col>
        </el-row>
    </basic-container>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';
  import LineChart from '@/components/line-chart/LineChart.vue'
  export default {
    name: 'wel',
    components:{
      LineChart
    },
    data() {
      return {
        obj:{},
        data: [
          {
            name:'100101',
            sex:'是',
            date:'1994-02-23 00:00:00'
          }, {
            name:'100102',
            sex:'否',
            date:'1994-02-23 00:00:00'
          }, {
            name:'100103',
            sex:'否',
            date:'1994-02-23 00:00:00'
          }, {
            name:'100104',
            sex:'是',
            date:'1994-02-23 00:00:00'
          }
        ],
        option5:{
          width:'20px',
          header:false,
          menu:false,
          border:true,
          page:false,
          align:'center',
          menuAlign:'center',
          column:[
             {
              label:'单号',
              prop:'name'
            },
            {
              label:'是否外配',
              prop:'sex'
            },{
              label: "日期",
              prop: "date",
              type: "date",
              format: "yyyy-MM-dd hh:mm:ss",
              valueFormat: "yyyy-MM-dd hh:mm:ss",
            }
          ]
        },
        form: {},
        option1: {
          data: [{
            title: '错误日志',
            count: 12332,
            icon: 'icon-cuowu',
            color: 'rgb(49, 180, 141)',
          }, {
            title: '数据展示',
            count: 33,
            icon: 'icon-shujuzhanshi2',
            color: 'rgb(56, 161, 242)',
          }, {
            title: '权限管理',
            count: 2223,
            icon: 'icon-jiaoseguanli',
            color: 'rgb(117, 56, 199)',
          }, ]
        },
        option3: {
          data: [{
            title: '分类统计',
            subtitle: '实时',
            count: 7993,
            allcount: 10222,
            text: '当前分类总记录数',
            color: 'rgb(27, 201, 142)',
            key: '类',
          }, {
            title: '附件统计',
            subtitle: '实时',
            count: 3112,
            allcount: 10222,
            text: '当前上传的附件数',
            color: 'rgb(230, 71, 88)',
            key: '附',
          }, {
            title: '文章统计',
            subtitle: '实时',
            count: 908,
            allcount: 10222,
            text: '评论次数',
            color: 'rgb(178, 159, 255)',
            key: '评',
          }]
        },
        option4: {
          data: [{
            title: '转化率（日同比 28%）',
            color: 'rgb(178, 159, 255)',
            count: 32,
          }, {
            title: '签到率（日同比 11%）',
            color: 'rgb(230, 71, 88)',
            count: 32,
          }, {
            title: 'CPU使用率',
            color: 'rgb(27, 201, 142)',
            count: 56,
          }]
        },
      };
    },
    computed: {
      ...mapGetters(['website'])
    },
    methods: {
      tableRowClassName ({ row, rowIndex }) {
        if ((rowIndex%2)==0) {
          return 'warning-row';
        } else{
          return 'success-row';
        }
        return '';
      }
    }
  }
</script>

<style scoped>
 /deep/ .el-table .warning-row {
    background-color: oldlace;
  }

 /deep/ .el-table .success-row {
    background-color: #f0f9eb;
  }
</style>
